<template>
  <div v-if="jizai">
    <div class="topSearch">
      <div class="leftBox">
        <div class="searchbox">
          <em>单据日期：</em>
          <el-date-picker v-model="select.bDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" :picker-options="pickerOptionsBeginR" style="width:190px;" :clearable="false" size="small"></el-date-picker>~
            <el-date-picker v-model="select.eDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :picker-options="pickerOptionsEndR" style="width:190px;" :clearable="false" size="small"></el-date-picker>
        </div>
        <div class="searchbox">
          <em>缴费方案：</em>
           <el-select v-model="select.projectId" placeholder="输入学校名称" size="small" style="width:120px" clearable>
            <!-- <el-option label="全部" value=""></el-option> -->
            <el-option v-for="item in selectCondition.projectList" :key="item.projectId" :label="item.projectName" :value="item.projectId"></el-option>
          </el-select>
        </div>
        <div class="searchbox">
          <em>校区：</em>
           <el-select v-model="select.schoolId" placeholder="输入学校名称" size="small" style="width:120px" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in selectCondition.schoolList" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId" ></el-option>
          </el-select>
        </div>
        <div class="searchbox">
          <el-button type="primary" @click="getReportForm" size="mini">搜索</el-button>
          <el-button type="primary" @click="exportReportForm" size="mini">导出</el-button>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <div class="contentBox" style="height:95%; overflow:hidden; overflow-y:auto;" >
      <!-- <el-table :data="tableData" :span-method="arraySpanMethod" style="width:100%">
        <el-table-column prop="projectName" label="缴费方案" width="180"></el-table-column>
        <el-table-column prop="beginDate" label="单据开始日期" width="180"></el-table-column>
        <el-table-column prop="endDate" label="单据结束日期" width="180"></el-table-column>
        <el-table-column prop="schoolName" label="学校名称" width="180"></el-table-column>
        <el-table-column prop="gradeName" label="就读年级" width="150"></el-table-column>
        <el-table-column label="支付方式">
          <el-table-column prop="cardMoney" label="刷卡" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.cardMoney==''||scope.row.cardMoney==null||scope.row.cardMoney==undefined" style="color:#e8851e;">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.cardMoney?scope.row.cardMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.cardMoney|moneyType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cashMoney" label="现金" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.cashMoney==''||scope.row.cashMoney==null||scope.row.cashMoney==undefined" style="color:#e8851e;">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.cashMoney?scope.row.cashMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.cashMoney|moneyType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="transferMoney" label="转账" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.transferMoney==''||scope.row.transferMoney==null||scope.row.transferMoney==undefined" style="color:#e8851e;">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.transferMoney?scope.row.transferMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.transferMoney|moneyType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="otherMoney" label="其他方式" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.otherMoney==''||scope.row.otherMoney==null||scope.row.otherMoney==undefined" style="color:#e8851e;">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.otherMoney?scope.row.otherMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.otherMoney|moneyType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="onLineMoney" label="微信公众号" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.onLineMoney==''||scope.row.onLineMoney==null||scope.row.onLineMoney==undefined" style="color:#e8851e;">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.onLineMoney?scope.row.onLineMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.onLineMoney|moneyType}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="paidMoney" label="实收合计" width="150">
          <template slot-scope="scope">
              <span v-if="scope.row.paidMoney==''||scope.row.paidMoney==null||scope.row.paidMoney==undefined" style="color:#e8851e;">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.paidMoney?scope.row.paidMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.paidMoney|moneyType}}</span>
            </template>
        </el-table-column>
      </el-table> -->
      <div class="baobiao">
        <div class="baobiaoTop" :style="{width:121*12+'px'}">
          <div><span>缴费方案</span></div>
          <div><span>单据开始时间</span></div>
          <div><span>单据结束时间</span></div>
          <div><span>学校名称</span></div>
          <div><span>就读年级</span></div>
          <div>
            <div><span style="text-align: center; width: 100%;">支付方式</span></div>
            <div><span>刷卡</span><span>现金</span><span>转账</span><span>其他方式</span><span>微信公众号</span></div>
          </div>
          <div><span>实收合计</span></div>
          <div><span>退费金额</span></div>
        </div>

      <div class="baobiaoBody" :style="{width:121*12+'px'}">
          <div style="float:left">
            <el-tooltip class="item" effect="dark" :content="select.projectName" placement="top">
            <span :style="{height:35*listNumCon.nianji+2*listNumCon.nianji+'px',whiteSpace:'nowrap', overflow:'hidden',textOverflow:'ellipsis',padding:10+'px', lineHeight:1.5+'em'}">{{select.projectName}}</span>
            </el-tooltip>
            </div>
          <div :style="{width:121*11+'px'}">
          <div><span :style="{height:35*listNumCon.nianji+2*listNumCon.nianji+'px',paddingTop:10+'px'}">
          <em v-if="listNumCon.nianji<3" :style="{whiteSpace:'nowrap', overflow:'hidden',textOverflow:'ellipsis',lineHeight:15+'px',marginTop:-7+'px',display:'block',}" v-html="select.bDate.substr(0,10)+'<br>'+select.bDate.substr(11,19)"></em>
            <em v-else v-html="select.bDate.substr(0,10)+'<br>'+select.bDate.substr(11,19)"></em>
          </span></div>
          <div><span :style="{height:35*listNumCon.nianji+2*listNumCon.nianji+'px',paddingTop:10+'px'}">
          <em v-if="listNumCon.nianji<3" :style="{whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',lineHeight:15+'px',marginTop:-7+'px',display:'block',}" v-html="select.eDate.substr(0,10)+'<br>'+select.eDate.substr(11,19)"></em>
            <em v-else v-html="select.eDate.substr(0,10)+'<br>'+select.eDate.substr(11,19)"></em>
          </span></div>
          <div class="rightNR" :style="{width:121*9+'px'}">
            <div v-for="(a,index) in tableData" :key="index">

              <div>
                <el-tooltip class="item" effect="dark" :content="a.schoolName" placement="top">
                <span :style="{height:35*a.gradeNum+2*a.gradeNum+'px', whiteSpace:'nowrap', overflow:'hidden',textOverflow:'ellipsis',padding:10+'px', lineHeight:1.5+'em'}">{{a.schoolName}}</span>
                </el-tooltip>
                </div>
              <div>
                <div v-for="(b,index1) in a.newList" :key="index1">
                  <div v-for="(c,index2) in b.List" :key="index2">
                    <span>{{c.gradeName}}</span>
                    <!-- <span v-for="(d,indx3) in c.moneyList" :key="indx3">{{d.money|moneyStyle}}</span> -->
                    <span>{{c.cardMoney|moneyStyle}}</span>
                    <span>{{c.cashMoney|moneyStyle}}</span>
                    <span>{{c.transferMoney|moneyStyle}}</span>
                    <span>{{c.otherMoney|moneyStyle}}</span>
                    <span>{{c.onLineMoney|moneyStyle}}</span>
                    <span>{{c.paidMoney|moneyStyle}}</span>
                    <span>{{c.refundMoney|moneyStyle}}</span>
                  </div>
                  <!-- <div class="zong">
                    <span>年级总分</span>
                    <span>{{b.cardMoneyz|moneyStyle}}</span>
                    <span>{{b.cashMoneyz|moneyStyle}}</span>
                    <span>{{b.transferMoneyz|moneyStyle}}</span>
                    <span>{{b.onLineMoneyz|moneyStyle}}</span>
                    <span>{{b.otherMoneyz|moneyStyle}}</span>
                    <span>{{b.shizong|moneyStyle}}</span>
                    <span>{{b.tuizong|moneyStyle}}</span>
                    </div> -->
                  </div>
              </div>
              <!-- <div class="zongji" style="display:block;">
                <span style="width:244px;">总计</span>
                <span>{{a.cardMoneyz|moneyStyle}}</span>
                    <span>{{a.cashMoneyz|moneyStyle}}</span>
                    <span>{{a.transferMoneyz|moneyStyle}}</span>
                    <span>{{a.onLineMoneyz|moneyStyle}}</span>
                    <span>{{a.otherMoneyz|moneyStyle}}</span>
                <span>{{a.shizong|moneyStyle}}</span>
                <span>{{a.tuizong|moneyStyle}}</span>
                </div> -->
            </div>
          </div>
          </div>
        </div>

      </div>

      <div class="summaryBox">
        <h3>总结：</h3>
        <p><em>缴费方案：</em><b>{{select.projectName}}</b></p>
        <p><em>集团总实收合计：</em><b>{{zongjie.shishou|moneyStyle}}</b></p>
        <p><em>退费总金额：</em><b>{{zongjie.tuifei|moneyStyle}}</b></p>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name:'PaymentMethod',
  data() {
    return {
     select:{
        bDate:'',
        eDate:'',
        projectId:'',
        projectName:'',
        schoolId:''
      },
      selectCondition:{
        projectList:[],
        schoolList:[],
      },
      tableData:[],
      zongjie:{
        shishou:0,
        tuifei:0,
      },
      congNum:0,
      jizai:false,
      listNumCon:{},
      pickerOptionsBeginR:{
          disabledDate:time=>{
            return time.getTime() > new Date(this.select.eDate).getTime();
          }
        },
        pickerOptionsEndR:{
          disabledDate:time=>{
            return time.getTime() < new Date(this.select.bDate).getTime();
          }
        },
    }
  },
  watch:{
    "select.projectId":{
      handler(nv,ov){
        if(nv){
           this.getCondition("school");
           this.getReportForm();
           this.selectCondition.projectList.forEach(event=>{
             if(event.projectId==nv){
               this.select.projectName=event.projectName;
             }
           })
        }else{
          this.getCondition("project");
        }
      },
      immediate:true
    }
  },
  filters: {
    moneyStyle(val) {
      var nm = 0;
      if (val == null || val == "" || val == undefined) {
        return parseFloat(nm).toFixed(2);
      }
      nm = parseFloat(val).toFixed(2);
      return nm;
    },
    timeStyle(val){
      if(!val) return "----"
      var mes  = val.substr(0,10);
      return mes;
    }
  },
  mounted() {

  },
  methods: {
    // 获取搜索条件
    getCondition(tp){
      this.$api.generalStatement.GetSearchCondition(tp,this.select.projectId).then(res=>{
        //console.log("获取搜索条件",res);
        if(tp=="project"){
          this.selectCondition.projectList = res.data.result.projectList;
          this.select.projectId = res.data.result.projectList[0].projectId;
        }else{
          this.selectCondition.schoolList  = res.data.result.schoolList;
        }
      })
    },
    exportReportForm(){
      this.$api.generalStatement.GetMonthlyReportPay(this.select.projectId,this.select.schoolId,this.select.bDate,this.select.eDate,'export').then(res => {
        //console.log("导出列表",res);
        window.open(res.data.result)
      });
    },

    // 获取月报表
    getReportForm(){
      this.zongjie.shishou = 0;
      this.zongjie.tuifei = 0;
      this.$api.generalStatement.GetMonthlyReportPay(this.select.projectId,this.select.schoolId,this.select.bDate,this.select.eDate,'list').then(res=>{
        //console.log("获取月报表（支付方式）",res);
        // this.tableData = res.data.result
        // this.tableData.forEach(event=>{
        //   event.beginDate = this.select.bDate;
        //   event.endDate = this.select.eDate;
        // })

      var reportResults = res.data.result;

      reportResults.forEach(zhjs=>{
        this.zongjie.shishou += parseFloat(zhjs.paidMoney).toFixed(2)*1000/1000;
        this.zongjie.tuifei += parseFloat(zhjs.refundMoney).toFixed(2)*1000/1000;
      })


        // 学校分组
        let dataArr = [];
        reportResults.map(mapItem => {
          if (dataArr.length == 0) {
              dataArr.push({ schoolName: mapItem.schoolName,schoolId: mapItem.schoolId,List: [mapItem] })
          } else {
            let ress = dataArr.some(item=> {//判断相同日期，有就添加到当前项
              if (item.schoolId == mapItem.schoolId) {
                item.List.push(mapItem)
                return true
              }
            })
            if (!ress) {//如果没找相同日期添加一个新对象
              dataArr.push({ schoolName: mapItem.schoolName,schoolId: mapItem.schoolId,List: [mapItem] })
            }
          }
        })

        console.log(dataArr);
        this.tableData = dataArr;

        var listNum = 0;
        this.tableData.forEach(event=>{
          listNum += event.List.length;
        })
        this.congNum = listNum;

        // 年级分组
        for(var a =0,len =dataArr.length;a<len;a++){
          dataArr[a].newList = [];
          dataArr[a].gradeNum = dataArr[a].List.length;
          dataArr[a].List.map(event=>{
            if(dataArr[a].newList.length==0){
              dataArr[a].newList.push({sectionName:event.sectionName,sectionId:event.sectionId,List:[event]});
              // dataArr[a].newList.push({List:[event]});
            }else{
              let ress = dataArr[a].newList.some(item=> {//判断相同日期，有就添加到当前项
                if (item.sectionId == event.sectionId) {
                  item.List.push(event)
                  return true
                }
              })
              if (!ress) {//如果没找相同日期添加一个新对象
                dataArr[a].newList.push({ sectionName: event.sectionName,sectionId:event.sectionId,List:[event] });
                // dataArr[a].newList.push({List:[event] });
              }
            }
          })
        }

        // 计算有多少合计
        var shuliang ={};
        shuliang.xuexiao = this.tableData.length;
        shuliang.xueduan = 0;
        shuliang.nianji = 0;
        for(var i=0,len = this.tableData.length;i<len;i++){
          shuliang.xueduan += this.tableData[i].newList.length;
          for(var j=0,lenn = this.tableData[i].newList.length;j<lenn;j++){
            shuliang.nianji+=this.tableData[i].newList[j].List.length;
          }
        }
        shuliang.zong = shuliang.xuexiao+shuliang.xueduan+shuliang.nianji;
        this.listNumCon = shuliang;

        // 列表合计
        this.tableData.forEach(ceng=>{
          ceng.newList.forEach(cengg=>{
            cengg.shizong = 0;
            cengg.tuizong = 0;
            cengg.cardMoneyz = 0;
            cengg.cashMoneyz = 0;
            cengg.onLineMoneyz = 0;
            cengg.otherMoneyz = 0;
            cengg.transferMoneyz = 0;
            cengg.List.forEach(cenggg=>{
              cengg.shizong += parseFloat(cenggg.paidMoney).toFixed(2)*1000/1000;
              cengg.tuizong += parseFloat(cenggg.refundMoney).toFixed(2)*1000/1000;

              cengg.cardMoneyz += parseFloat(cenggg.cardMoney).toFixed(2)*1000/1000;
              cengg.cashMoneyz += parseFloat(cenggg.cashMoney).toFixed(2)*1000/1000;
              cengg.onLineMoneyz += parseFloat(cenggg.onLineMoney).toFixed(2)*1000/1000;
              cengg.otherMoneyz += parseFloat(cenggg.otherMoney).toFixed(2)*1000/1000;
              cengg.transferMoneyz += parseFloat(cenggg.transferMoney).toFixed(2)*1000/1000;

            })
            // ceng.shizong += parseFloat(cengg.shizong).toFixed(2)*1000/1000;
            // ceng.tuizong += parseFloat(cengg.tuizong).toFixed(2)*1000/1000;
          })
        })


        this.tableData.forEach((ceng,index)=>{
          ceng.shizong =0;
          ceng.tuizong =0;
          ceng.cardMoneyz = 0;
          ceng.cashMoneyz = 0;
          ceng.onLineMoneyz = 0;
          ceng.otherMoneyz = 0;
          ceng.transferMoneyz = 0;
          ceng.newList.forEach((cengg,index1)=>{
            ceng.shizong += parseFloat(cengg.shizong).toFixed(2)*1000/1000;
            ceng.tuizong += parseFloat(cengg.tuizong).toFixed(2)*1000/1000;

            ceng.cardMoneyz += parseFloat(cengg.cardMoneyz).toFixed(2)*1000/1000;
              ceng.cashMoneyz += parseFloat(cengg.cashMoneyz).toFixed(2)*1000/1000;
              ceng.onLineMoneyz += parseFloat(cengg.onLineMoneyz).toFixed(2)*1000/1000;
              ceng.otherMoneyz += parseFloat(cengg.otherMoneyz).toFixed(2)*1000/1000;
              ceng.transferMoneyz += parseFloat(cengg.transferMoneyz).toFixed(2)*1000/1000;
          })
        })

        this.jizai = true;
      })
    }
  }
}
</script>

<style>

</style>
